<template>
  <div class="directive-box relative">
    <div class="title-line list-caption mt15 ml10 relative">
      指令详细信息
      <div class="title-oper">
        <IconButton
          :icon="visible.directiveInfo ? 'fold' : 'unfold'"
          :title="visible.directiveInfo ? '收起' : '展开'"
          :activated="false"
          @click.native="handleModuleToggle('directiveInfo')"
        ></IconButton>
      </div>
    </div>
    <div class="split-line mt18 mb18"></div>

    <div ref="directiveInfo_ref" class="f14 directive-Info-wrapper">
      <div class="ml40 d-flex flex-ju-sb">
        <span>共{{ tableData.length || 0 }}条</span>

        <div v-if="from === 'create'" class="mr30">
          <Button type="primary" @click="handleTableDataAdd">新增链接</Button>
          <!-- <Button class="ml10">筛选重复链接</Button>
          <Button class="ml10">删除重复链接</Button> -->
        </div>
      </div>
      <CommonTablePage
        ref="tableData_ref"
        class="mt10"
        height="280"
        :columns="columns"
        :tableData="revealTableData"
        :current="formData.pageNo"
        :total="tableData.length"
        :page-size="formData.pageSize"
        :page-size-opts="[5].concat(commonPagination.sizes)"
        @on-change="handlePageChange"
        @on-page-size-change="handlePageSizeChange"
      ></CommonTablePage>
    </div>
  </div>
</template>

<script>
/* ***  在稿池选择对应稿件后下发指令，支持移除所选的稿件，但不用手动新增。 *** */

// components
import CommonTablePage from '@/components/common/CommonTablePage/CommonTablePage'
// utils
import { createColumns_directiveInfo } from './tableColumns'
import { createCommonPage } from '@/utils/service.js'
import { getEntryManuIssue } from '@/utils/storage.js'

let rowId = 0 // 新建指令时，新增表格需要用到
const createTableItem = (editable) => ({ id: rowId++, title: '', link: '', editable })
export default {
  name: 'DirectiveInfo',

  components: { CommonTablePage },

  props: {
    viewDetails: Object,
    currentFbTem: {
      default: () => ({}),
    },
  },

  data() {
    return {
      formData: { ...createCommonPage({ pageSize: 5 }) },
      columns: createColumns_directiveInfo(this),
      tableData: [], // 表格全部数据，进行分页展示 一页显示5条，可翻页
      revealTableData: [], // 展示的表格数据

      visible: {
        directiveInfo: true,
      },
    }
  },

  computed: {
    from() {
      return this.$route.query.f
    },
  },

  watch: {
    currentFbTem() {
      this.columns = createColumns_directiveInfo(this)
    },
    viewDetails: {
      handler(v) {
        if (!v.isDetails) return
        const data = v.info
        this.tableData = JSON.parse(data.json)
        this.setRevealTableData()
      },
      deep: true,
    },
  },

  methods: {
    handleModuleToggle(module) {
      this.$parent.moduleHeightToggle(this, module)
    },

    handleTableDataAdd() {
      this.tableData.push(createTableItem(this.from === 'create'))
      this.setRevealTableData()
    },

    handleTableDataDetele(params) {
      // console.log(params, this.tableData)
      const { row } = params
      this.tableData = this.tableData.filter((it) => it.id !== row.id)
      this.setRevealTableData()
      // const t_data = this.$refs['tableData_ref'].$children[0].data
    },

    getParams() {
      const data = []
      this.tableData.forEach((it) => {
        if (it.title && it.url) {
          data.push({ title: it.title, url: it.url })
        }
      })
      // console.log('getParams', data)
      return { json: JSON.stringify(data) }
    },

    setRevealTableData() {
      this.revealTableData = []
      const startPos = (this.formData.pageNo - 1) * this.formData.pageSize
      const endPos = startPos + this.formData.pageSize
      const data = this.tableData.slice(startPos, endPos)
      // 当前页没有数据并且不在第一页，往前退一页 
      if (data.length < 1 && this.formData.pageNo > 1) {
        this.formData.pageNo = this.formData.pageNo - 1
        this.setRevealTableData()
        return
      }
      this.revealTableData = data
    },

    handlePageChange(page) {
      this.formData.pageNo = page
      this.setRevealTableData()
    },
    handlePageSizeChange(pageSize) {
      this.formData.pageSize = pageSize
      this.setRevealTableData()
    },
  },

  mounted() {
    if (this.from === 'create') {
      while (this.tableData.length < 4) {
        this.handleTableDataAdd()
      }
      this.setRevealTableData()
    } else if (this.from === 'issue') {
      const data = getEntryManuIssue()
      this.tableData = data
      this.setRevealTableData()
    } else {
      // console.log('数据复现')
    }
  },
}
</script>

<style lang="less" scoped>
.directive-box {
  /deep/ .pagination-container {
    position: static;
    margin: 20px 0 0;
  }
}
</style>
